import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import {
  DetailWrapper,
  DetailInner,
  DetailHead,
  DetailTitle,
  ContentInfo,
  ContentSpan,
  DetailContent
} from './style';
import {actionCreators} from "./store";

class Detail extends PureComponent {
  render() {
    console.log(this.props.match.params.id);
    const { detail } = this.props;
    return (
      <div className='main'>
        <DetailWrapper>
          <DetailInner>
            <DetailHead>
              <DetailTitle>{detail.title}</DetailTitle>
              <ContentInfo>
                <ContentSpan className='source'>{detail.author}</ContentSpan>
                <ContentSpan className='num'>{detail.viewNum}阅读</ContentSpan>
                <ContentSpan className='time'>{detail.publish_time}</ContentSpan>
              </ContentInfo>
            </DetailHead>
            <DetailContent dangerouslySetInnerHTML={{__html: detail.content}}>
              {/*<p>我们以 iOS 版本更新为主线，整理了微信 7 个版本的变化，为你梳理出中国移动社交的进化图谱。</p>*/}
              {/*<img alt='' src='https://download-cdn.pmcaff.com/coffee-09927e4ea7bce3a9154e0a86d0c22293' />*/}
              {/*<p>2018年12 月 30 日，微信 7.0 for Android 正式版上线，加上之前已经推送的 iOS 版本，微信在 2018 年底终于告别 4 年前的 6.0 版本，开始了新的进化。</p>*/}
              {/*<p>微信诞生的 7 年多里，每推出一个整数版本号都意味着重大更新，所修改变化的功能也代表着国内移动社交产品迭代的方向。</p>*/}
              {/*<p>*/}
                {/*有的功能新增后从未下线，有的功能也在被撤回。我们以 iOS 版本更新为主线，整理了微信 7 个版本的变化，为你梳理出中国移动社交的进化图谱。*/}
              {/*</p>*/}

            </DetailContent>
          </DetailInner>
        </DetailWrapper>
      </div>
    )
  }

  componentDidMount() {
    this.props.getDetail(this.props.match.params.id);
  }

}

const mapStateToProps = (state) => ({
  login: state.login.login,
  detail: state.detail.detail
});

const mapDispatchToProps = (dispatch) => ({
  getDetail(id) {
    dispatch(actionCreators.getDetail(id));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(Detail);